<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由-基本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>
<div id="app">
    <h1>路由导航</h1>
    <!--这是路由入口，点击跳转-->
    <router-link to="/nima/dog">nima</router-link>
    <router-link to="/hehe/hh">hehe</router-link>
    <router-link to="/hehe/nima/oo">hehe</router-link>
    <!--路由出口。内容渲染在此-->
    <router-view></router-view>
</div>

<script>
    //定义组件
    const User = {
        template: '<div>User {{ $route.params.user_tag}}===={{$route.params.nima}}</div>',
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
            },
        },
        //或者
        // beforeRouteUpdate (to, from, next) {
        //     // react to route changes...
        //     // don't forget to call next()
        // }
    }

    //路由配置
    const router = new VueRouter({
        routes: [
            // 动态路径参数。链接形如/nima/xxx
            {path: '/nima/:user_tag', component: User},
            {path: '/hehe/:user_tag', component: User},//tag不同，user复用，生命周期不走
            {path: '/hehe/:user_tag/:nima', component: User},//多个参数
        ]
    })

    //使用路由
    var v = new Vue({
        router: router
    }).$mount("#app")

</script>

</body>
</html>